<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap总概</title>
    </head>
    <body>
<!--
    Bootstrap:
           1.概念:一个前端开发的框架
                 框架:就是一个半成品软件,开发人员可以在框架的基础上再进行开发,简化代码
                 好处:1.定义了很多的css样式和js插件,我们开发人员直接可以使用这些样式和插件得到丰富的页面效果
                     2.响应式布局 同一套页面可以兼容不同分辨率的设备

           2.快速入门
                1.下载 Bootstrap
                2.在项目中将三个文件复制
                3.创建html页面,引入必要的资源文件
   响应式布局
           1概念: 同一套页面可以兼容不同分辨率的设备
           2.实现:依赖于栅格系统,将一行平均分为12个格子,可以指定元素占几个格子
           3.步骤: 1.定义容器:
                        container
                        container-fluid
                  2.定义行
                        row
                  3.定义元素
                     设备代号:
                          1. xs:超小屏幕  手机(<768px): col-xs-12
                          2. sm:小屏幕  平板(>=768px)
                          3.md:中小屏幕 桌面显示器(>=992px)
                          3.lg: 大屏幕 大桌面显示器(>1200px)
                      注意:1.一行中如果格子数目超过12,则超出部分自动换行
                          2.栅格类属性可以向上兼容,栅格类适用于屏幕宽度大于或等于分界点大小的设备
                          3.如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素占满一整行







 -->
    </body>
</html>